<template>
	<view>
		<!-- 自定义导航栏 -->
		<view class="navBarBox">
			<!-- 状态栏占位 -->
			<view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view>
			<!-- 真正的导航栏内容 -->
			<view class="navBar">
				<view class="goback">
					<view @click="goBack" class="goicon" style="background:url(../../../static/goback.png);background-size:contain;background-repeat: no-repeat;">
					</view>
				</view>
				<view class="title">个人中心</view>
				<view class="right">

				</view>
			</view>
		</view>

		<view class="shadow"></view>
		<view class="parentChild">
			<view class="parentName">{{studentName}}的妈妈</view>
			<view class="iconfont icon--" @click="goChildAdd"></view>
		</view>
		<view class="childStudy">
			<image class="headImg" @click="uploadHeadImg" :src="headImgSrc"></image>
			<view class="childStudyInfo">
				<view @click="goMyRechargeDetail">
					<text>{{studentName}}</text>
					<text>查看消费记录哦</text>
				</view>
			</view>
		</view>
		<view class="moneyBox">
			<view>
				<view>余额</view>
				<view class="moneyNUm">
					<text>208</text>
					<text>课时</text>
				</view>
			</view>
			<button @click="goCenterRearge">充值</button>
		</view>
		<view class="childInfo">
			<view class="list">
				<text>{{school}}</text>
				<view class="listRight studyState">{{orInschool}}</view>
			</view>
			<view class="list">
				<text>孩子性别</text>
				<view>
					<view @click="openSex" class="listRight">{{sex}}</view>
					<uni-popup ref="popup1" type="bottom">
						<view class="sexChoose">
							<view class="sexMan" hover-class="changeColor" @click="closeMan">男</view>
							<view class="sexWoman" hover-class="changeColor" @click="closeWoman">女</view>
							<view class="sexCancel" hover-class="changeColor" @click="closeCancel">取消</view>
						</view>
					</uni-popup>
					<view class="iconfont icon-you"></view>
				</view>
			</view>
			<view class="list">
				<view>孩子生日</view>
				<view>
					<picker mode="date" class="listRight" @change="bindDateChange">{{bornDate}}</picker>
					<view class="iconfont icon-you"></view>
				</view>
			</view>
			<view class="list">
				<view>孩子就读年级</view>
				<view>
					<picker mode="multiSelector" :range="gradeClass" class="listRight" @change="changeClass">{{gradeClassVal}}</picker>
					<view class="iconfont icon-you"></view>
				</view>
			</view>
			<view class="list">
				<view class="addressLeft">家庭住址</view>
				<view>
					<picker mode='region' class="listRight" @change="homeAddressChoose" @click="detailAddress">{{homeAddress}}</picker>
					<uni-popup ref="popup2" type="bottom">
						<view class="writeAddress">
							<input v-model="detailAddressInp" placeholder="填写详细地址"/>
							<button @click="clsoseWriteAddress">确认地址</button>
						</view>
					</uni-popup>
					<view class="iconfont icon-you"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	export default {
		components: {
			uniPopup,
			uniPopupMessage,
			uniPopupDialog
		},
		data() {
			return {
				orInschool:"",
				headImgSrc:'https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=148200059,2148086178&fm=111&gp=0.jpg',
				// 状态栏高度
				statusBarHeight: 0,
				// 导航栏高度
				navBarHeight: 82 + 11,
				sex: "",
				gradeClass: [
					["2014级", "2015级", "2016级", "2017级", "2018级", "2019级","2020级","2021级"],
					["一班", "二班", "三班", "四班","五班","六班"]
				],
				gradeClassVal: "",
				bornDate: "",
				homeAddress: "",
				detailAddressInp:"",
				school:'',
				studentMsg:'',
				studentName:''
			}
		},
		//第一次加载时调用
		created() {
			//获取手机状态栏高度
			this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
		},
		mounted(){
			this.homeAddress=this.homeAddress+this.detailAddressInp,
			this.studentMsg=Number(uni.getStorageSync('muxuehao'));
			console.log(typeof(this.studentMsg));
			this.syudentInfo();
		},
		methods: {
			
			goBack() {
				// 此处是写返回页面的方法、
				uni.navigateBack({
					delta: 1 //返回只上一级页面
				});
			},
			goMyRechargeDetail(){
				uni.navigateTo({
					url: './myRechargeDetail'
				})
			},
			uploadHeadImg(){
				//console.log(this.headImgSrc)
				 uni.chooseImage({
				    success: (chooseImageRes) => {
				        const tempFilePaths = chooseImageRes.tempFilePaths;
				        uni.uploadFile({
				            url: 'http://172.16.14.10:8084/upload/cos', 
				            filePath: tempFilePaths[0],
				            name: 'file',
				            success: (uploadFileRes) => {
				                console.log(uploadFileRes);
								this.headImgSrc=uploadFileRes.data
				            }
				        });
				    }
				}); 
			},
			// 去-充值中心
			goCenterRearge() {
				uni.navigateTo({
					url: './myCenterRecharge'
				})
			},
			//去添加孩子
			goChildAdd() {
				uni.navigateTo({
					url: '../../register/parentregister/parentRegList'
				})
			},
			openSex() {
				this.$refs.popup1.open()
			},
			detailAddress(){
				this.$refs.popup2.open()
			},
			closeMan() {
				this.$refs.popup1.close()
				this.sex = "男"
			},
			closeWoman() {
				this.$refs.popup1.close()
				this.sex = "女"
			},
			closeCancel() {
				this.$refs.popup1.close()
			},
			clsoseWriteAddress(){
				this.$refs.popup2.close()
				this.homeAddress=this.homeAddress+this.detailAddressInp
				// console.log(this.detailAddressInp)
			
			},
			changeClass(event) {
				this.gradeClassVal = this.gradeClass[0]
				for (var i = 0; i < this.gradeClass[0].length; i++) {
					for (var j = 0; j < this.gradeClass[1].length; j++) {
						this.gradeClassVal = this.gradeClass[0][event.detail.value[0]] + this.gradeClass[1][event.detail.value[1]]
					}
				}
			},
			bindDateChange(e) {
				this.bornDate = e.target.value
			},
			homeAddressChoose(e) {
				// console.log(e.target.value)
				var arr = e.target.value.splice(1, 2)
				// console.log(arr)
				this.homeAddress = arr.join("")
			},
			syudentInfo(){
				//console.log(this.studentMsg)
				uni.request({
				    url: 'http://172.16.14.10:8084/parentRegister/bindByNo/'+this.studentMsg+'', 
				    success: (res) => {
				        console.log(res);
						//console.log(res.data.data.sex)
						this.school=res.data.data.sschool;
						if(res.data.data.sex==0){
							this.sex='男'
						}else{
							this.sex='女'
						}
						var birth=res.data.data.birth.substring(0,10)
						//console.log(birth)
						this.bornDate=birth
						this.gradeClassVal=res.data.data.sclass
						var goSchoolYear=res.data.data.sclass.substring(0,4)
						console.log(goSchoolYear)
						console.log(new Date().getFullYear())
						if(new Date().getFullYear()-goSchoolYear<6){
							this.orInschool='在校';
						}else{
							this.orInschool='毕业'
						}
						this.homeAddress=res.data.data.sarea,
						this.studentName=res.data.data.sname
						
				    },
					fail:(err)=>{
						console.log(err)
					}
				});
			}

		}
	}
</script>

<style lang="less" scoped>
	@import url("@/static/fonts/iconfont.css");  
	.navBarBox .navBar {
		padding: 3rpx 50rpx;
		padding-bottom: 8rpx;
		display: flex;
		justify-content: space-between;

		line-height: 93rpx;
		font-size: 40rpx;
	}

	.goback {
		flex: 1;
		height: 100%;
	}

	.goicon {
		width: 30rpx;
		height: 30rpx;
		background-color: #00BEA9;
		margin-top: 30rpx;
	}

	.title {
		flex: 1;
		height: 100%;

	}

	.right {
		flex: 1;
	}

	.shadow {
		width: 100%;
		height: 20rpx;
		background-color: #fafafa;
	}
	.parentChild{
		display: flex;
		justify-content: space-between;
		.parentName {
			width: 278rpx;
			height: 70rpx;
			margin-top: 32rpx;
			background-color: rgba(45, 179, 254, 0.1);
			margin-left: 30rpx;
			border-radius: 35rpx;
			color: rgb(45, 179, 254);
			text-align: center;
			line-height: 70rpx;
			font-size: 36rpx;
		}
		.icon--{
			font-size: 60rpx;
			color: rgba(45, 179, 254,0.6);
			margin-right: 90rpx;
			margin-top: 40rpx;
		}
	}
	
	.childStudy {
		position: relative;
		width: 690rpx;
		margin-left: 30rpx;
		margin-top: 26rpx;
		height: 180rpx;
		border: 2rpx solid #FFFFFF;

		.headImg {
			position: absolute;
			margin-left: 34rpx;
			width: 166rpx;
			height: 166rpx;
			background-color: #007AFF;
			border-radius: 83rpx;
		}

		.childStudyInfo {
			margin-top: 30rpx;
			width: 100%;
			height: 150rpx;
			box-shadow: 0rpx 0rpx 20rpx 8rpx #f1f1f1;

			view {
				height: 150rpx;
				width: 490rpx;
				float: right;
				display: flex;
				align-items: center;
				justify-content: center;

				text:first-child {
					font-size: 34rpx;
					color: rgb(45, 179, 254);
				}

				text:last-child {
					font-size: 24rpx;
					color: rgb(45, 55, 63);
					margin-left: 24rpx;
				}
			}
		}
	}

	.moneyBox {
		width: 690rpx;
		height: 116rpx;
		margin-top: 80rpx;
		display: flex;
		margin-left: 30rpx;
		justify-content: space-between;
		border-bottom: 2rpx solid #e1e1e1;

		view {
			display: flex;

			view:first-child {
				font-size: 50rpx;
				color: rgb(18, 18, 18);
				margin-top: 12rpx;
			}

			.moneyNUm {
				margin-top: 30rpx;
				margin-left: 28rpx;
				color: rgb(255, 108, 44);

				text:first-child {
					font-size: 34rpx;
				}

				text:last-child {
					margin-top: 6rpx;
					margin-left: 4rpx;
					font-size: 24rpx;
				}
			}
		}

		button {
			margin: 0;
			background-color: #2eb3fe;
			color: #ffffff;
			width: 228rpx;
			height: 70rpx;
			float: right;
			text-align: center;
			line-height: 70rpx;
			box-shadow: 0rpx 0rpx 10rpx 4rpx #9cdcff;
		}
	}

	.childInfo {
		width: 690rpx;
		margin-left: 30rpx;

		.list {
			width: 100%;
			display: flex;
			justify-content: space-between;
			margin-top: 70rpx;
			.addressLeft{
				width: 30%;
			}
			.studyState{
				margin-right: 40rpx;
			}
			>view:last-child{
				display: flex;
				align-items: center;
				>view:last-child{
					margin-left: 10rpx;
				}
			}
			text {
				font-size: 32rpx;
				color: rgb(18, 18, 18);
			}

			.listRight {
				text-align: right;
				font-size: 32rpx;
				color: rgba(18, 18, 18, 0.55);
			}

			.sexChoose {
				margin-left: 30rpx;
				width: 690rpx;
				height: 342rpx;

				.sexMan {
					width: 100%;
					height: 90rpx;
					color: #126ff7;
					background-color: #fff;
					text-align: center;
					line-height: 90rpx;
					font-size: 28rpx;
					border-radius: 20rpx 20rpx 0 0;
					border-bottom: 2rpx solid #e0e0e0;
				}

				.sexWoman {
					width: 100%;
					height: 90rpx;
					color: #126ff7;
					background-color: #fff;
					text-align: center;
					line-height: 90rpx;
					font-size: 28rpx;
					border-radius: 0 0 20rpx 20rpx;
				}

				.sexCancel {
					margin-top: 30rpx;
					width: 100%;
					height: 90rpx;
					color: #126ff7;
					background-color: #fff;
					text-align: center;
					line-height: 90rpx;
					font-size: 28rpx;
					font-weight: bold;
					border-radius: 20rpx;
				}

				.changeColor {
					background-color: #f1f1f1;
				}
			}
			.writeAddress{
				// margin-left: 30rpx;
				width: 100%;
				height: 250rpx;
				background-color: #fff;
				padding-top: 20rpx;
				display: flex;
				// flex-direction:column ;
				justify-content: center;
				flex-wrap: wrap;
				input{
					height: 100rpx;
					border-radius: 10rpx;
					padding-left: 10rpx;
					width: 700rpx;
					// margin-left: 20rpx;
					border: 2rpx solid #e0e0e0;
					line-height: 100rpx;
				}
				button{
					margin: 0;
					background-color: #2eb3fe;
					color: #ffffff;
					width: 228rpx;
					height: 70rpx;
					text-align: center;
					line-height: 70rpx;
					box-shadow: 0rpx 0rpx 10rpx 4rpx #9cdcff;
				}
			}
		}
	}
</style>
